<template>

    <el-row :gutter="24">
        <el-col :span="6" :class="userStore.isMobile ? 'mobile-span-24' : ''">
            <div class="statistic-card">
                <el-statistic :value="allCommission" :formatter="(value) => value.toFixed(2)">
                    <template #title>
                        <div style="display: inline-flex; align-items: center;font-size: 16px;">
                            结算阶段绩效￥
                        </div>
                    </template>
                </el-statistic>
            </div>
        </el-col>
        <el-col :span="6" :class="userStore.isMobile ? 'mobile-span-24' : ''">
            <div class="statistic-card">
                <el-statistic :value="already" :formatter="(value) => value.toFixed(2)">
                    <template #title>
                        <div style="display: inline-flex; align-items: center;font-size: 16px;">
                            已分配￥
                        </div>
                    </template>
                </el-statistic>
            </div>
        </el-col>


    </el-row>


    <el-divider style="font-size: 16px; font-weight: bold;">项目提成绩效</el-divider>

    <el-tag type="primary" size="large"
        style="margin-left: 20px;margin-bottom: 10px;">提示:初始系数为100,销售负责人的绩效金额等于项目提成减去其余人绩效金额之和</el-tag>


    <!-- 从核算已完成过来的 说明已经全部分配完成 -->
    <el-table :row-class-name="tableRowClassName" v-loading="loading" v-if="currentPage == 'accountingComplete'" border
        :data="allocationList" :row-key="(row) => ['id', 'current'].map(k => row[k]).join('-')">
        <el-table-column label="参与人" align="center" prop="personName" width="120" />
        <el-table-column label="岗位" align="center" width="100" show-overflow-tooltip prop="postName" />
        <el-table-column label="标准岗位绩效系数" v-if="parentRatioVisible && allCommission != 0" align="center" width="130"
            show-overflow-tooltip prop="parentRatio" />
        <el-table-column label="标准岗位绩效金额" v-if="parentMoneyVisible && allCommission != 0" align="center" width="130"
            show-overflow-tooltip prop="parentMoney" />

        <el-table-column label="绩效系数(%)" align="center" width="120" prop="ratio" />
        <el-table-column label="绩效金额" v-if="moneyVisible && allCommission != 0" align="center" width="120"
            prop="money" />


        <el-table-column label="起始日期" align="center" width="150" prop="startDate" />

        <el-table-column label="截止日期" align="center" width="150" prop="endDate" />

        <el-table-column label="备注" align="center" width="180">
            <template #default="scope">
                <el-input :disabled="!admin" v-model="scope.row.remark" placeholder="请输入"></el-input>
            </template>
        </el-table-column>

        <el-table-column v-if="personMoneyVisible" :fixed="userStore.isMobile ? false : 'right'" label="个人绩效金额"
            align="center" width="120" prop="personMoney" />

        <el-table-column label="个人已发放" align="center" :fixed="userStore.isMobile ? false : 'right'" width="120"
            prop="already" />

        <el-table-column label="个人绩效未发放" align="center" :fixed="userStore.isMobile ? false : 'right'" width="120"
            prop="wait" />

        <el-table-column label="个人本次发放" align="center" :fixed="userStore.isMobile ? false : 'right'" width="120">
            <template #default="scope">
                <el-input type="number" :disabled="!admin" @wheel.native.prevent v-model="scope.row.personCurrent"
                    placeholder=""></el-input>
            </template>
        </el-table-column>


        <el-table-column v-if="deptMoneyVisible" label="部门绩效金额" :fixed="userStore.isMobile ? false : 'right'"
            align="center" width="120" prop="deptMoney" />

        <el-table-column v-if="deptMoneyVisible" label="部门绩效已发放" :fixed="userStore.isMobile ? false : 'right'"
            align="center" width="120" prop="deptAlready" />

        <el-table-column label="部门绩效未发放" align="center" :fixed="userStore.isMobile ? false : 'right'" width="120"
            prop="deptWait" />


        <el-table-column label="部门本次发放" align="center" :fixed="userStore.isMobile ? false : 'right'" width="120">
            <template #default="scope">
                <el-input type="number" :disabled="!admin" @wheel.native.prevent v-model="scope.row.deptCurrent"
                    placeholder=""></el-input>
            </template>
        </el-table-column>

        <el-table-column v-if="confirm" label="操作" align="center" :fixed="userStore.isMobile ? false : 'right'"
            width="120" class-name="small-padding fixed-width">
            <template #default="scope">
                <el-button v-if="admin" type="primary" @click="handleConfirm(scope.row, '1')" plain>确认发放</el-button>
                <el-button v-if="admin" type="primary" @click="getLosList(scope.row.id)" plain>历史发放</el-button>

            </template>
        </el-table-column>

    </el-table>


    <el-divider style="font-size: 16px; font-weight: bold;">质保金绩效</el-divider>
    <el-row :gutter="16" v-if="allCommission1 != 0">
        <el-col :span="8">
            <div class="statistic-card">
                <el-statistic :value="allCommission1" :formatter="(value) => value.toFixed(2)">
                    <template #title>
                        <div style="display: inline-flex; align-items: center;font-size: 16px;">
                            质保阶段绩效
                        </div>
                    </template>
                </el-statistic>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="statistic-card">
                <el-statistic :value="already1" :formatter="(value) => value.toFixed(2)">
                    <template #title>
                        <div style="display: inline-flex; align-items: center;font-size: 16px;">
                            已分配￥
                        </div>
                    </template>
                </el-statistic>
            </div>
        </el-col>
    </el-row>

    <el-table :row-class-name="tableRowClassName" v-loading="loading" border :data="allocationList1"
        :row-key="(row) => ['id', 'current'].map(k => row[k]).join('-')">
        <el-table-column label="参与人" align="center" width="120" prop="personName" />
        <el-table-column label="岗位" align="center" width="100" show-overflow-tooltip prop="postName" />
        <el-table-column label="标准岗位绩效系数" v-if="parentRatioVisible" align="center" width="150" show-overflow-tooltip
            prop="parentRatio" />
        <el-table-column label="标准岗位绩效金额" v-if="warrantyMoneyVisible && allCommission1 != 0" align="center" width="130"
            show-overflow-tooltip prop="warrantyMoney" />
        <el-table-column label="绩效系数(%)" align="center" prop="ratio" width="120" />
        <el-table-column label="绩效金额" v-if="moneyVisible && allCommission1 != 0" align="center" width="120"
            prop="money" />

        <el-table-column label="起始日期" align="center" width="150" prop="startDate" />

        <el-table-column label="截止日期" align="center" width="150" prop="endDate" />

        <el-table-column label="备注" align="center" width="180">
            <template #default="scope">
                <el-input :disabled="!admin" v-model="scope.row.remark" placeholder="请输入"></el-input>
            </template>
        </el-table-column>
        <el-table-column :fixed="userStore.isMobile ? false : 'right'"
            v-if="personMoneyVisibleWarranty && allCommission1 != 0" label="个人绩效金额" align="center" width="120"
            prop="personMoney" />

        <el-table-column :fixed="userStore.isMobile ? false : 'right'"
            v-if="personMoneyVisibleWarranty && allCommission1 != 0" label="个人绩效已发放" align="center" width="120"
            prop="already" />
        <el-table-column label="个人绩效待发放" align="center" :fixed="userStore.isMobile ? false : 'right'" width="120"
            prop="wait" />

        <el-table-column label="个人本次发放" align="center" :fixed="userStore.isMobile ? false : 'right'" width="120">
            <template #default="scope">
                <el-input type="number" :disabled="!admin" @wheel.native.prevent v-model="scope.row.personCurrent"
                    placeholder=""></el-input>
            </template>
        </el-table-column>

        <el-table-column :fixed="userStore.isMobile ? false : 'right'"
            v-if="deptMoneyVisibleWarranty && allCommission1 != 0" label="部门绩效金额" align="center" width="150"
            prop="deptMoney" />

        <el-table-column :fixed="userStore.isMobile ? false : 'right'"
            v-if="deptMoneyVisibleWarranty && allCommission1 != 0" label="部门绩效已发放" align="center" width="150"
            prop="deptAlready" />
        <el-table-column label="部门绩效未发放" align="center" :fixed="userStore.isMobile ? false : 'right'" width="150"
            prop="deptWait" />

        <el-table-column label="部门本次发放" align="center" :fixed="userStore.isMobile ? false : 'right'" width="150">
            <template #default="scope">
                <el-input type="number" :disabled="!admin" @wheel.native.prevent v-model="scope.row.deptCurrent"
                    placeholder=""></el-input>
            </template>
        </el-table-column>

        <el-table-column v-if="confirm" label="操作" align="center" :fixed="userStore.isMobile ? false : 'right'"
            width="180" class-name="small-padding fixed-width">
            <template #default="scope">
                <el-button v-if="admin" type="primary" @click="handleConfirm(scope.row, '1')" plain>确认发放</el-button>
                <el-button v-if="admin" type="primary" @click="getLosList(scope.row.id)" plain>历史发放</el-button>

            </template>
        </el-table-column>

    </el-table>


    <el-drawer v-model="issueOpen" title="绩效发放记录" direction="btt" :with-header="false" size='40%'>
        <el-table v-loading="loading" :data="logList" @selection-change="handleSelectionChange">
            <el-table-column label="销售负责人" align="center" prop="personName" />
            <el-table-column label="个人总绩效" align="center" prop="personTotalt" />
            <el-table-column label="个人本次发放" align="center" prop="personCurrent" />
            <el-table-column label="个人剩余" align="center" prop="personWait" />
            <el-table-column label="部门总绩效" align="center" prop="deptTotalt" />
            <el-table-column label="部门本次发放" align="center" prop="deptCurrent" />
            <el-table-column label="部门剩余" align="center" prop="deptWait" />
            <el-table-column label="发放时间" align="center" prop="startDate" width="180">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
                </template>
            </el-table-column>
        </el-table>

    </el-drawer>


</template>

<script setup name="allocation">
import { ref } from 'vue'
import { listAllocation, listAllocationConfirm, getAllocation, delAllocation, addAllocation, updateAllocation, createAllocation, reCreateAllocation, isJoin, checkComplete } from "@/api/project/allocation";
import { listDetail, getDetail, delDetail, updateDetail, getAllocationMoney, auditAllocation, getProjectRole, confirmDetail } from "@/api/project/allocation";
import { getPermission } from "@/api/project/project";
import { getInfo } from "@/api/login";
import { reactive } from 'vue';
import { tr } from 'element-plus/es/locales.mjs';
import { listLog, getLog, delLog, addLog, updateLog } from "@/api/project/log";

const props = defineProps({

});
const tableRef = ref(null);
const openAllocation = ref(false)
const { proxy } = getCurrentInstance();
const open = ref(false);
const parentBorder = ref(false)
const childBorder = ref(false)
const preserveExpanded = ref(true)
const allocationList = ref([])
const allocationList1 = ref([])
const loading = ref(false);
const allCommission = ref(0)
const allCommission1 = ref(0)
const confirmTotal = ref(0)
const confirmRemaining = ref(0)
const confirmTotal1 = ref(0)
const confirmRemaining1 = ref(0)
const already = ref(0)
const already1 = ref(0)
const remaining = ref(0)
const remaining1 = ref(0)
const projectNo = ref()

const issueOpen = ref(false)

const admin = ref(false)
const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 1000,
        name: null,
        model: null,
        param: null,
        brand: null,
        count: null,
        unit: null,
        price: null,
        totalPrice: null,
        discountRate: null,
        discountPrice: null,
        remarkCode: null,
        preCount: null,
        prePrice: null,
        preUnit: null,
        finalCount: null,
        finalCost: null,
        loginIp: null,
        loginDate: null,
        projectNo: null,
        goodsId: null,
        percentage: null,
        out: null,
        already: null,
        wait: null
    },
    rules: {
        id: [
            { required: true, message: "id不能为空", trigger: "blur" }
        ],
    }
});

const { queryParams, form, rules } = toRefs(data);

function isJoinPerson() {

}

const logList = ref([])

function getLosList(id) {

    let param = {
        detailId: id
    }
    listLog(param).then((response) => {
        logList.value = response.data;
        issueOpen.value = true
    });
}

// 取消按钮

function cancel() {

    open.value = false;

    reset();

}

function getSummary(param) {
    const { columns, data } = param;

    const sums = [];

    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '合计';
            return;
        }

        const key = column.property;
        const validKeys = [
            'projectAmount',
            'taxAmount',
            'materialCost',
            'costOne',
            'costTwo',
            'costThree',
            'fundCost',
            'laborCost',
            'profit',
            'costFees',
            'differenceFees',
            'beforeProfit',
            'retentionMoney',
            'afterProfit',
            'projectCommission'
        ];

        if (!validKeys.includes(key)) {
            sums[index] = '';
            return;
        }

        const sum = data.reduce((acc, item) => {
            return acc + (Number(item[key]) || 0);
        }, 0);

        sums[index] = sum.toFixed(2);
    });

    return sums;
}

// 表单重置

function reset() {
    form.value = {
        id: null,
        allocationId: null,
        ratio: null,
        money: null,
        startDate: null,
        endDate: null,
        warranty: null,
        projectNo: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        loginIp: null,
        loginDate: null,
        remark: null,
        personName: null,
        personId: null
    };

    proxy.resetForm("detailRef");

}




// 定义列是否显示的状态
// 使用 ref 来定义每个列是否显示的状态
//标准岗位绩效系数 只能吴总看
const parentRatioVisible = ref(false);
//标准岗位绩效金额 只能吴总 销售负责人 项目经理看
const parentMoneyVisible = ref(false);
//绩效金额  有金额的时候才显示 项目验收进行中是没有的 
const moneyVisible = ref(false);
//绩效金额 质保金部分
const warrantyMoneyVisible = ref(false);
//个人绩效金额
const personMoneyVisible = ref(false);
//部门绩效金额
const deptMoneyVisible = ref(false);

//个人绩效金额 质保金部分
const personMoneyVisibleWarranty = ref(false);
//部门绩效金额 质保金部分
const deptMoneyVisibleWarranty = ref(false);



const sale = ref(false)
const boss = ref(false)
const manger = ref(false)
const other = ref(false)


const tableRowClassName = ({ row }) => {
    return row.confirm == "2" ? 'success-row' : '';
};



async function filterData() {
    //绩效系数后端过滤 只有吴总能看
    //是否是验收阶段过来的 是则不显示金额信息 因为还没生成提成金额

    //有项目提成金额了
    if (allCommission.value != 0) {
        if (currentPage.value == 'accept') {
            //项目验收进行中阶段没有项目提成信息 默认false 不需要任何操作

        } else if (currentPage.value == 'acceptComplete') {
            //如果是验收已完成过来的   有就说明已经有核算信息了
            console.log("验收已完成的");
            //如果有金额了 就让看金额信息

            //个人绩效金额
            personMoneyVisible.value = true
            if (boss.value) {
                //标准岗位绩效系数 只能吴总看
                parentRatioVisible.value = true;
                parentMoneyVisible.value = true
                warrantyMoneyVisible.value = true
                moneyVisible.value = true
                personMoneyVisible.value = true
                deptMoneyVisible.value = true
            }
            if (sale.value || manger.value) {
                //标准岗位绩效金额 只能吴总 销售负责人 项目经理看
                parentMoneyVisible.value = true
                //绩效金额  有金额的时候才显示  
                moneyVisible.value = true
                personMoneyVisible.value = true
                deptMoneyVisible.value = true
            }
        } else if (currentPage.value == 'accounting') {
            //核算环节过来的 说明是总经理  可看全部
            parentRatioVisible.value = true;
            parentMoneyVisible.value = true
            warrantyMoneyVisible.value = true
            moneyVisible.value = true
            personMoneyVisible.value = true
            deptMoneyVisible.value = true
        } else if (currentPage.value == 'accountingComplete') {
            personMoneyVisible.value = true
            if (boss.value) {
                //标准岗位绩效系数 只能吴总看
                parentRatioVisible.value = true;
                parentMoneyVisible.value = true
                warrantyMoneyVisible.value = true
                moneyVisible.value = true
                personMoneyVisible.value = true
                deptMoneyVisible.value = true
            }
            if (sale.value || manger.value) {
                //标准岗位绩效金额 只能吴总 销售负责人 项目经理看
                parentMoneyVisible.value = true
                moneyVisible.value = true
                personMoneyVisible.value = true
                deptMoneyVisible.value = true
            }
        }
    }

    //有质保金金额了
    if (allCommission1.value != 0) {
        if (currentPage.value == 'accept') {
            //项目验收进行中阶段没有项目提成信息 默认false 不需要任何操作

        } else if (currentPage.value == 'acceptComplete') {
            //如果是验收已完成过来的   有就说明已经有核算信息了
            console.log("验收已完成的");
            //如果有金额了 就让看金额信息

            //个人绩效金额
            personMoneyVisible.value = true
            if (boss.value) {
                //标准岗位绩效系数 只能吴总看
                parentRatioVisible.value = true;
                parentMoneyVisible.value = true
                warrantyMoneyVisible.value = true
                moneyVisible.value = true
                personMoneyVisible.value = true
                deptMoneyVisible.value = true

                warrantyMoneyVisible.value = true
                personMoneyVisibleWarranty.value = true
                deptMoneyVisibleWarranty.value = true

            }
            if (sale.value || manger.value) {
                //标准岗位绩效金额 只能吴总 销售负责人 项目经理看
                parentMoneyVisible.value = true
                //绩效金额  有金额的时候才显示  
                moneyVisible.value = true
                personMoneyVisible.value = true
                deptMoneyVisible.value = true

                warrantyMoneyVisible.value = true
                personMoneyVisibleWarranty.value = true
                deptMoneyVisibleWarranty.value = true
            }
        } else if (currentPage.value == 'accounting') {
            //核算环节过来的 说明是总经理  可看全部
            parentRatioVisible.value = true;
            parentMoneyVisible.value = true
            warrantyMoneyVisible.value = true
            moneyVisible.value = true
            personMoneyVisible.value = true
            deptMoneyVisible.value = true

            warrantyMoneyVisible.value = true
            personMoneyVisibleWarranty.value = true
            deptMoneyVisibleWarranty.value = true
        } else if (currentPage.value == 'accountingComplete') {
            personMoneyVisible.value = true
            if (boss.value) {
                //标准岗位绩效系数 只能吴总看
                parentRatioVisible.value = true;
                parentMoneyVisible.value = true
                warrantyMoneyVisible.value = true
                moneyVisible.value = true
                personMoneyVisible.value = true
                deptMoneyVisible.value = true

                warrantyMoneyVisible.value = true
                personMoneyVisibleWarranty.value = true
                deptMoneyVisibleWarranty.value = true
            }
            if (sale.value || manger.value) {
                //标准岗位绩效金额 只能吴总 销售负责人 项目经理看
                parentMoneyVisible.value = true
                moneyVisible.value = true
                personMoneyVisible.value = true
                deptMoneyVisible.value = true

                warrantyMoneyVisible.value = true
                personMoneyVisibleWarranty.value = true
                deptMoneyVisibleWarranty.value = true
            }
        }
    } else {
    }

}


const type = ref('')
const currentPage = ref('')
const curentUserId = ref()
const confirm = ref(false)
// 项目信息  类型  来源页面 是否是确认发放
async function initData(datas, types, pages, isConfirm) {
    currentPage.value = pages
    //判断是否参与了这个项目
    const joinPar = { projectNo: datas.projectNo };
    const [join] = await Promise.all([
        isJoin(joinPar),
    ]);
    console.log("判断是否参与了这个项目", join);
    if (!join) {
        proxy.$modal.msgError("未参与该项目的绩效分配");
        allocationList.value = []
        allocationList1.value = []
        allCommission.value = 0
        allCommission1.value = 0
        return;
    }
    console.log("rrrrrrrr", pages);

    type.value = types;
    loading.value = true;
    openAllocation.value = true;
    projectNo.value = datas.projectNo;

    const params1 = { projectNo: datas.projectNo, current: "1" };
    const params2 = { projectNo: datas.projectNo, current: "2" };

    try {
        // 并行查询两个列表
        const [res1] = await Promise.all([
            listAllocationConfirm(params1),
            // listAllocation(params2)
        ]);

        // 处理第一个查询结果
        allocationList.value = res1.data;

        const [r2] = await Promise.all([
            listAllocationConfirm(params2)
        ]);

        // 处理第二个查询结果
        allocationList1.value = r2.data;

        // 获取分配金额信息
        const moneyRes = await getAllocationMoney(params1);
        allCommission.value = moneyRes.data.allCommission;
        already.value = moneyRes.data.already;
        remaining.value = moneyRes.data.remaining;
        confirmTotal.value = moneyRes.data.confirmTotal
        confirmRemaining.value = moneyRes.data.confirmRemaining

        const moneyRes2 = await getAllocationMoney(params2);
        allCommission1.value = moneyRes2.data.allCommission;
        already1.value = moneyRes2.data.already;
        remaining1.value = moneyRes2.data.remaining;

        confirmTotal1.value = moneyRes.data.confirmTotal
        confirmRemaining1.value = moneyRes.data.confirmRemaining


        if (isConfirm != undefined && isConfirm != null && isConfirm != '') {
            confirm.value = isConfirm
        }
        console.log("确认发放", confirm.value);
    } catch (error) {
        console.error("初始化数据失败：", error);
        // 可以弹出提示或做其他错误处理
    } finally {
        loading.value = false;
    }
    isAdmin()
}



async function handleConfirm(row, oper) {
    form.value = row
    await confirmDetail(form.value).then(response => {
        proxy.$modal.msgSuccess("提交成功");
    });

    //检查是否已经全部发放完成
    checkComplete(form.value.projectNo).then(response => {
    });


    loading.value = true;

    const params1 = { projectNo: projectNo.value, current: "1" };
    const params2 = { projectNo: projectNo.value, current: "2" };

    try {
        // 并行查询两个列表
        const [res1] = await Promise.all([
            listAllocationConfirm(params1),
            // listAllocation(params2)
        ]);

        // 处理第一个查询结果
        allocationList.value = res1.data;

        const [r2] = await Promise.all([
            listAllocationConfirm(params2)
        ]);

        // 处理第二个查询结果
        allocationList1.value = r2.data;

        // 获取分配金额信息
        const moneyRes = await getAllocationMoney(params1);
        allCommission.value = moneyRes.data.allCommission;
        already.value = moneyRes.data.already;
        remaining.value = moneyRes.data.remaining;

        const moneyRes2 = await getAllocationMoney(params2);
        allCommission1.value = moneyRes2.data.allCommission;
        already1.value = moneyRes2.data.already;
        remaining1.value = moneyRes2.data.remaining;
    } catch (error) {
        // 可以弹出提示或做其他错误处理
    } finally {
        loading.value = false;
    }

}




/** 提交按钮 */
async function submitForm() {
    if (form.value.id != null) {
        form.value.type = type.value
        await updateDetail(form.value).then(response => {
            proxy.$modal.msgSuccess("提交成功");
            open.value = false;
        });

    }
}

defineExpose({ initData });

import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
async function isAdmin() {
    let params = {
        projectNo: projectNo.value,
        postIds: [1]
    }
    // getPermission(params).then((response) => {
    //     console.log("权限信息", response.data);
    //     admin.value = response.data
    // });



    // 获取用户名
    console.log('用户名:', userStore.name)
    if (userStore.name == 'wuzg') {
        admin.value = true
    } else {
        admin.value = false
    }

    let params1 = {
        projectNo: projectNo.value,
    };

    await getProjectRole(params1).then((res) => {
        console.log("当前项目的操作人角色", res);

        boss.value = res.data.boss
        sale.value = res.data.sale
        manger.value = res.data.manger

    })

    await getInfo().then((res) => {
        curentUserId.value = res.user.userId
        console.log("绩效分配页面用户", curentUserId.value);
    })

    filterData()

}

</script>



<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
    background-color: var(--el-fill-color) !important;
}


.el-statistic {
    --el-statistic-content-font-size: 28px;
}

.statistic-card {
    height: 100%;
    padding: 20px;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-top: 16px;
}

.statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.green {
    color: var(--el-color-success);
}

.red {
    color: var(--el-color-error);
}



:deep(.el-table .warning-row) {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

/* 悬停效果 */
:deep(.el-table .warning-row:hover td) {
    --el-table-tr-bg-color: var(--el-color-warning-light-8);
    background-color: var(--el-table-tr-bg-color);
}

/* 如果需要更醒目的边框样式 */
:deep(.el-table .warning-row td) {
    border-bottom: 1px solid var(--el-color-warning-light-5);
    border-top: 1px solid var(--el-color-warning-light-5);
}

:deep(.el-table .warning-row td:first-child) {
    border-left: 1px solid var(--el-color-warning-light-5);
}

:deep(.el-table .warning-row td:last-child) {
    border-right: 1px solid var(--el-color-warning-light-5);
}



/* 如果需要更醒目的边框样式 */
:deep(.el-table .success-row td) {
    border-bottom: 1px solid var(--el-color-warning-light-5);
    border-top: 1px solid var(--el-color-warning-light-5);
}

:deep(.el-table .success-row td:first-child) {
    border-left: 1px solid var(--el-color-warning-light-5);
}

:deep(.el-table .success-rowtd:last-child) {
    border-right: 1px solid var(--el-color-warning-light-5);
}
</style>


<style>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.mobile-span-24 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}
</style>